/**
* @desc 引导页面
* @author 钱炜亮
* @date 2024-07-15
*/
<template>
	<common-page>
		<view class="padding-bottom-20">所有页面都要使用 common-page 组件包裹，它会提供一些基础的功能，比如左右间距，底部安全距离等</view>
		<view class="padding-bottom-20">common-page 提供一个 toast 事件，可以方便的弹出提示信息，并且支持传入第二个参数，用于提示结束跳转页面</view>
		<u-button @click="handleToastAndJumpToLoginPage">点击提示并跳转到登录页面</u-button>
		<view class="padding-bottom-20 padding-top-20"> vuex 已配置持久化，刷新页面不会丢失用户信息 。使用 mapGetters 获取数据信息，mapActions 调用方法</view>
		<view>用户名： {{ userName }}</view>
		<u-button @click="handleSetUserName('李四')">设置用户名</u-button>
		<view class="padding-bottom-20 padding-top-20"> class 方法做了很多封装，一些简单的间距，颜色，字体大小等可以直接使用 class 名称来设置</view>
		<view class="padding-bottom-20 padding-top-20"> 例如：padding-20 代表上下左右都为 20px 的间距，text-center 代表居中对齐，具体样式可以到 styles/common.scss 文件查看</view>
		<u-button @click="handleAlert">展示 alert 弹窗</u-button>
		<u-button @click="handleConfirm">展示 confirm 弹窗</u-button>
	</common-page>
</template>

<script>
// noinspection NpmUsedModulesInstalled
import { mapGetters, mapActions } from 'vuex';
export default {
	components: {},
	data() {
		return {};
	},
	computed: {
		...mapGetters('user', ['userName'])
	},
	mounted() {
		this.handleSetUserName('张三');
	},
	methods: {
		...mapActions('user', ['updateUserInfo']),
		/* ====== S 事件区域 ====== */
		handleToastAndJumpToLoginPage() {
			uni.$emit('toast', '提示结束后跳转到登录页面', '/pages/login/index');
		},
		handleSetUserName(userName) {
			this.updateUserInfo({ userName });
		},
		handleAlert() {
			uni.$alert('我是 alert 弹窗', '', {
				confirmText: '确定'
			}).then(() => {
				uni.$emit('toast', '点击了确定');
			}).catch(() => {
				uni.$emit('toast', '点击了取消');
			});
		},
		handleConfirm() {
			uni.$confirm('我是 confirm 弹窗', '标题').then(() => {
				uni.$emit('toast', '点击了确定');
			}).catch(() => {
				uni.$emit('toast', '点击了取消');
			});
		}
		/* ====== E 事件区域 ====== */
		/* ====== S 通用逻辑 ====== */

		/* ====== E 通用逻辑 ====== */
		/* ====== S 接口定义 ====== */

		/* ====== E 接口定义 ====== */
	}
};
</script>

<style lang="scss" scoped>

</style>
